---
title: Accessibility
redirect_from:
  - /components/notificationbadge/accessibility/
---

## Accessibility

The NotificationBadge component has been designed with accessibility in mind, providing a way to display important notifications with proper screen reader support.

### Accessibility Props

The following props are available to improve the accessibility of your NotificationBadge component:

| Name      | Type         | Description                                                                                          |
| :-------- | :----------- | :--------------------------------------------------------------------------------------------------- |
| ariaLabel | `string`     | Provides an accessible name for the notification badge that will be announced by screen readers.     |
| icon      | `React.Node` | The displayed icon. When used, `ariaLabel` should be provided to ensure screen reader accessibility. |

### Automatic Accessibility Features

The NotificationBadge component automatically sets `role="status"` to announce updates to assistive technologies.

### The `ariaLabel` Prop

The `ariaLabel` prop is crucial for making NotificationBadge components accessible:

- It sets the `aria-label` attribute on the badge, providing context for screen readers
- When provided, it completely replaces what screen readers would announce about the badge's visual content
- It's essential when using icons or when the numerical content alone isn't sufficient to convey meaning
- For number-only badges (like "3"), it can be used to add context about what the number represents (e.g., "3 unread messages")

### Best Practices

#### Screen Reader Support

- Always provide a descriptive `ariaLabel` that clearly explains what the notification badge represents
- Ensure all `ariaLabel` text is translated to the user's language
- Make the label concise but informative, focusing on the count and its meaning

#### Using Icons

- When using the `icon` prop, always provide an `ariaLabel` on the NotificationBadge component while adding `ariaHidden` to the icon itself
- Choose icons that visually reinforce the meaning of the notification

#### Visual Design Considerations

- Do not rely on color alone to convey the meaning of notifications
- While color types (critical, warning, info, etc.) help visually distinguish importance, always ensure meaning is conveyed through additional means like text, icons, or aria-label
- This approach ensures users with color vision impairments can understand the notification's importance
- Example: Combine a "critical" type notification with an appropriate icon and descriptive `ariaLabel`

### Examples

#### Basic usage with numerical content

```jsx
<NotificationBadge ariaLabel="3 unread messages">3</NotificationBadge>
```

Screen reader announces: "3 unread messages, status".

#### Usage with an icon

```jsx
<NotificationBadge type="critical" icon={<Email ariaHidden />} ariaLabel="Urgent unread message" />
```

Screen reader announces: "Urgent unread message, status".

In this example, because an icon is provided, any children content would not be displayed. The `ariaLabel` ensures screen reader users still receive the notification information.
